---
type: tutorial
title: 데이터를 생성하여 사용자 정의 블로그 레이아웃에 전달
description: >-
  튜토리얼: 첫 번째 Astro 블로그 구축 — Markdown 파일에 대한 블로그 게시물 레이아웃을 생성하고 프런트매터 값을 props로 전달합니다.
i18nReady: true
---

import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';
import Badge from "~/components/Badge.astro"

이제 페이지 레이아웃이 준비되었으므로 블로그 게시물 레이아웃을 추가할 차례입니다!

<PreCheck>
  - Markdown 파일에 대한 새 블로그 게시물 레이아웃 만들기
  - YAML 프런트매터 값을 레이아웃 컴포넌트에 props로 전달
</PreCheck>

## 블로그 게시물에 레이아웃 추가

`.md` 파일에 `layout` 프런트매터 속성을 포함하면 모든 프런트매터 YAML 값을 레이아웃 파일에서 사용할 수 있습니다.

<Steps>
1. `src/layouts/MarkdownPostLayout.astro`에 새 파일을 만듭니다.

2. 다음 코드를 `MarkdownPostLayout.astro`에 복사합니다.

    ```astro title="src/layouts/MarkdownPostLayout.astro"
    ---
    const { frontmatter } = Astro.props;
    ---
    <meta charset="utf-8" />
    <h1>{frontmatter.title}</h1>
    <p>Written by {frontmatter.author}</p>
    <slot />
    ```

3. `post-1.md`에 다음 프런트매터 속성을 추가하세요.

    ```markdown title="src/pages/posts/post-1.md" ins={2}
    ---
    layout: ../../layouts/MarkdownPostLayout.astro
    title: 'My First Blog Post'
    pubDate: 2022-07-01
    description: 'This is the first post of my new Astro blog.'
    author: 'Astro Learner'
    image:
        url: 'https://docs.astro.build/assets/rose.webp'
        alt: 'The Astro logo on a dark background with a pink glow.'
    tags: ["astro", "blogging", "learning in public"]
    ---
    ```

4. `http://localhost:4321/posts/post-1`에서 브라우저 미리보기를 다시 확인하고 페이지에 어떤 레이아웃이 추가되었는지 확인하세요.

5. 다른 두 블로그 게시물 `post-2.md` 및 `post-3.md`에 동일한 레이아웃 속성을 추가합니다. 여러분의 레이아웃이 이러한 게시물에도 적용되는지 브라우저에서 확인하십시오.
</Steps>

:::tip
레이아웃을 사용할 때 이제 페이지 제목과 같은 요소를 Markdown 콘텐츠 또는 레이아웃에 포함할 수 있는 옵션이 제공됩니다. 페이지 미리보기를 시각적으로 검사하고 중복된 요소를 피하기 위해 필요한 조정을 수행하는 것을 잊지 마세요.
:::

<Box icon="puzzle-piece">

## 직접 시도해 보기 - 블로그 게시물 레이아웃 맞춤설정

**과제**: 모든 블로그 게시물에 공통된 항목을 식별하고 `post-1.md`의 Markdown 및 향후 모든 블로그 게시물에 작성하는 대신 `MarkdownPostLayout.astro`를 사용하여 렌더링합니다.

다음은 Markdown 본문에 작성하는 대신 레이아웃 컴포넌트에 `pubDate`를 포함하도록 코드를 리팩터링하는 예시입니다.

```markdown title="src/pages/posts/post-1.md" del={1}
Published on: 2022-07-01

Welcome to my _new blog_ about learning Astro! Here, I will share my learning journey as I build a new website.
```

```astro title="src/layouts/MarkdownPostLayout.astro" ins={6}
---
const { frontmatter } = Astro.props;
---
<meta charset="utf-8" />
<h1>{frontmatter.title}</h1>
<p>Published on: {frontmatter.pubDate.toString().slice(0,10)}</p>
<p>Written by {frontmatter.author}</p>
<slot />
```

유용하다고 생각되는 만큼 리팩터링하고 원하는 만큼 레이아웃에 추가하세요. 레이아웃에 추가하는 모든 내용은 모든 블로그 게시물에 작성하게 될 내용이 하나 적다는 점을 기억하세요!

다음은 슬롯에서 렌더링된 개별 블로그 게시물 콘텐츠만 남기는 리팩터링된 레이아웃의 예시입니다. 자유롭게 사용하거나 직접 만들어보세요!

```astro title="src/layouts/MarkdownPostLayout.astro"
---
const { frontmatter } = Astro.props;
---
<meta charset="utf-8" />
<h1>{frontmatter.title}</h1>
<p>{frontmatter.pubDate.toString().slice(0,10)}</p>
<p><em>{frontmatter.description}</em></p>
<p>Written by: {frontmatter.author}</p>
<img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />
<slot />
```
</Box>

:::note[중복 피하기]
레이아웃으로 렌더링된 모든 내용은 블로그 게시물에 입력할 필요가 **없습니다**! 브라우저 미리보기를 확인할 때 중복된 내용이 발견되면 Markdown 파일에서 콘텐츠를 제거하세요.
:::

<Box icon="question-mark">

### 지식 테스트

다음 두 컴포넌트가 함께 작동하는 Astro 코드를 생성하려면 빈칸에 무엇이 들어가야 하는지 알아낼 수 있나요?

1.  ```markdown title="src/pages/posts/learning-astro.md"
    ---
    layout: ../../__________/MyMarkdownLayout.astro
    title: "Learning About Markdown in Astro"
    author: Astro Learner
    ____: 2022-08-08
    ---
    I learned so much today! Astro allows me to write in Markdown, but also use variables from the frontmatter. I can even access those values in an Astro layout component.
    ```

2.  ```astro title="src/layouts/MyMarkdownLayout.astro"
    ---
    import ____________ from '../components/Footer.astro'
    const { ___________ } = Astro.props
    ---
    <h1>{frontmatter.title}</h1>
    <p>Written by: {frontmatter.______} on {frontmatter.pubDate}</p>
    < _______ />
    <Footer />
    ```
    <details>
        <summary>채워진 빈칸을 보여주세요!</summary>

        1.  ```markdown title="src/pages/posts/learning-astro.md" "layouts" "pubDate"
            ---
            layout: ../../layouts/MyMarkdownLayout.astro
            title: "Learning About Markdown in Astro"
            author: Astro Learner
            pubDate: 2022-08-08
            ---
            I learned so much today! Astro allows me to write in Markdown, but also use variables from the frontmatter. I can even access those values in an Astro layout component.
            ```

        2.  ```astro title="src/layouts/MyMarkdownLayout.astro" " Footer " " frontmatter " "author" "slot"
            ---
            import Footer from '../components/Footer.astro'
            const { frontmatter } = Astro.props
            ---
            <h1>{frontmatter.title}</h1>
            <p>Written by: {frontmatter.author} on {frontmatter.pubDate}</p>
            <slot />
            <Footer />
            ```
    </details>
</Box>

<Box icon="check-list">

## 체크리스트

<Checklist>
- [ ] Markdown 블로그 게시물의 YAML 프런트매터에 레이아웃 속성을 추가할 수 있습니다.
- [ ] Markdown 게시물에 대해 별도의 레이아웃을 만들 수 있습니다.
- [ ] 레이아웃 컴포넌트에서 블로그 게시물 프런트매터의 값을 사용할 수 있습니다.
</Checklist>

</Box>

### 참고 자료

- [Astro의 Markdown 레이아웃](/ko/guides/markdown-content/#프런트매터-layout-속성)

- [Markdown 레이아웃 Props](/ko/basics/layouts/#markdown-레이아웃-props)

- [YAML 소개](https://dev.to/paulasantamaria/introduction-to-yaml-125f) <Badge class="neutral-badge" text="외부 링크" />
